@extends('layouts.console_header')

@section('title', '代理商用户新增')

@section('resources')
    @parent
    <!-- css 文件 -->
<style>
    body{background: #f9f9f9;}
    #city_information{overflow: hidden;}
    #city_information li{margin: 10px;overflow: hidden;}
    #city_information li .city{position: relative;padding: 5px 10px;border: 1px solid #9955c6;margin: 10px;}
    #city_information li .city_proper{width: 995px;min-height: 100px;border: 1px solid #ccc;margin-left: 20px;}
    #city_information li .delete_pic{position: absolute;top: -7px;right: -7px;width: 15px;height: 15px;}
</style>
@endsection

@section('content')
<!--  html内容  -->
<section class="user_list">
    <div style="border-bottom: 2px solid #9955c6;overflow: hidden;">
        <p class="fz_14 account_title fl" style="border: none;"><span style="color: #7f7f7f;">
            <a href="/console/index">首页</a>>后台用户管理>
            <a href="/console/admin/agent/list?cityid={{$cityid}}">代理商用户列表</a>></span>
            <span class="co_violet">新增</span>
        </p>
        <a onclick="history.go(-1);" href="#"><p class="fr tc back_btn">返回</p></a>
    </div>
    <div class="modify_cont">
        <p>代理商账号信息</p>
        <form action="" method="">
            <input type="hidden" name="userid" value="" />
            <input type="hidden" name="cityid" value="{{$cityid}}" />
            <input type="hidden" name="action" value="add" />
            <ol>
                <li>
                    <p>
                        <span class="co_orange">*</span>
                        <span>姓名</span>
                    </p>
                    <input type="text" name="realname" value="" autocomplete="off">
                </li>
                <li>
                    <p>
                        <span class="co_orange">*</span>
                        <span>账号</span>
                    </p>
                    <input type="text" name="mobile" value="" placeholder="请输入手机号作为登录号" autocomplete="off">
                </li>
                <li>
                    <p>
                        <span class="co_orange">*</span>
                        <span>登录密码</span>
                    </p>
                    <input type="password" name="password" value="" placeholder="请输入6-18位的登录密码" autocomplete="off">
                </li>
                <li>
                    <p>
                        <span class="co_orange">*</span>
                        <span>类型</span>
                    </p>
                    <select name="type" id="" >
                        <option value="0">请选择</option>
                        <option value="1">省代</option>
                        <option value="2" selected="selected">市代</option>
                    </select>
                </li>
                <li>
                    <p>
                        <span class="co_orange">*</span>
                        <span>所属角色</span>
                    </p>
                    <input style="width: 60px;" type="text" name="" value="代理商" readonly>
                </li>
                <li>
                    <p>
                        <span class="co_orange">*</span>
                        <span>城市数据</span>
                    </p>
                    <select name="admincityid" id="admincityid" onchange="showDistrict(this)">
                        <option value="">请选择城市</option>
                        @foreach($citylist as $list)
                            <option value="{{$list['cityid']}}">{{$list['name']}}</option>
                        @endforeach
                    </select>
                    <input type="hidden" name="admincityid" />
                    <input type="hidden" name="admincitystring" />
                </li>
                <li>
                    <div class="oh">
                        <p>
                            <span class="co_orange">*</span>
                            <span>所属城区</span>
                        </p>
                        <select name="district" id="district" onchange="selectDistrict(this)">
                            <option value="">请选择城区</option>
                        </select>
                    </div>
                        
                    <ul id="city_information">

                    </ul>
                </li>
                <li>
                    <p>
                        <span class="co_orange">*</span>
                        <span>账号状态</span>
                    </p>
                    <select name="status" id="">
                        <option value="1" selected="selected">可用</option>
                        <option value="0">禁用</option>
                    </select>
                </li>
                <li>
                    <p>
                        <span class="co_orange">*</span>
                        <span>备注</span>
                    </p>
                    <textarea name="note" id="" cols="30" rows="10"></textarea>
                </li>
            </ol>
            <p style="border-left: 3px solid #9955c6;padding-left: 20px;">收款账户</p>
            <ol class="agent_message">
                <li>
                    <p>
                        <span class="co_orange">*</span>
                        <span>持卡人</span>
                    </p>
                    <input type="text" name="cardholder" value="" autocomplete="off">
                </li>
                <li>
                    <p>
                        <span class="co_orange">*</span>
                        <span>银行卡号</span>
                    </p>
                    <input type="text" name="bankcard" value="" autocomplete="off">
                </li>
                <li>
                    <p>
                        <span class="co_orange">*</span>
                        <span>银行名称</span>
                    </p>
                    <input style="width: 100px;border-radius: 5px;margin-right: 20px;" type="button" name="" value="查询" onclick="getbankname()">
                    <input type="text" name="bankname" value="" autocomplete="off">
                </li>
                <li>
                    <p>
                        <span class="co_orange">*</span>
                        <span>开户行</span>
                    </p>
                    <select name="bankprovince" id="bankprovince" style="margin-right: 20px;" onchange="showBankCity(this)">
                        <option value="">--请选择省份--</option>
                    </select>
                    <select name="bankcity" id="bankcity" style="margin-right: 20px;">
                        <option value="">--请选择城市--</option>
                    </select>
                    <input type="text" name="opencardbank" value="" autocomplete="off">
                </li>
            </ol>
            <div style="width: 1160px;margin: 20px 10px;" class="oh">
                <input class="sure fl" type="button" id="submit_form" value="保存"/>
                <input class="cancel fr" type="button" value="取消" onclick="history.go(-1);"/>
            </div>
        </form>
    </div>

</section>
@endsection

@section('scriptResources')
    @parent
    <script>
    var cityid='{{$cityid}}';
    var lisid;
    var cityarr=[];
    //选择角色
    function select_role(id) {
        var roleid = id.value;
        if(roleid == 1 || roleid == 2 || roleid== 5) {
            var isglobaldata = "<option value='1' selected='selected'>全局数据</option>" +
                               "<option value='0'>仅自己</option>";
        } else {
            var isglobaldata = "<option value='0' selected='selected'>仅自己</option>";
        }
       
        $("#horizon").find('select').html(isglobaldata);
    }
    function showDistrict(id) {
         //显示城市
        lisid=$(id).val();
        cityarr[0]=lisid;
        cityarr[1]=[];
        var parentid = id.value;
        var type='district';
        $.ajax({
            url : '/console/area/get',
            data:{"parentid":parentid,"type":type},
            dataType:'json',
            success:function(data){
                if(data.status == 'success') {
                    var data = data.data;
                    var areastring = '<option value="">请选择城区</option><option value="0">全部</option>';
                    for(var i=0; i<data.length; i++) {
                        var list = data[i];
                        areastring += '<option value="' + list.id +'">' + list.name + '</option>';
                    }
                    $("#district").html(areastring);
                }
            }
        });
        if(lisid==''){
            return false;
        }else{
            var cityname;
            for (var i = 0; i < $(id).children().length; i++) {
                if($(id).children().eq(i).val()==lisid){
                    cityname=$(id).children().eq(i).html()
                }
            };
            var lis=$('<li id="'+lisid+'"><div class="fl city">'+cityname+'<img class="delete_city delete_pic" src="{{env('IMAGE_DOMAIN')}}/images/console/access_delete.png" alt=""></div><div class="fl city_proper city_proper'+lisid+'"></div></li>');
            if($('#city_information').children().length==0){
                $('#city_information').prepend(lis);
            }else{//可以防止重复
                var liid;
                for (var i = 0; i < $('#city_information').children().length; i++) {
                    liid=$('#city_information').children().eq(i).attr('id');

                    if(liid==(lisid)){
                        return false;
                    }
                };
                if(liid!=(lisid)){
                    $('#city_information').prepend(lis);
                }
            }
            $('.delete_city').click(function(){
                $(this).parent().parent('li').remove();
            })
        }
    }
    function selectDistrict(idnext) {
        //TODO选择区县后
        var propername;
        for (var i = 0; i < $(idnext).children().length; i++) {
            if($(idnext).children().eq(i).val()==$(idnext).val()){
                propername=$(idnext).children().eq(i).html()
            }
        };

        var city_proper=$('<div class="fl city" id="city'+$(idnext).val()+'">'+propername+'|'+$(idnext).val()+'<img class="delete_pic delete_proper" src="{{env('IMAGE_DOMAIN')}}/images/console/access_delete.png" alt=""></div>')
        // for (var i = 0; i < $(idnext).children().length; i++) {

            if($(idnext).val()==0&&($(idnext).val()!='')) {
                if($(".city_proper"+lisid).children().length!=0){
                    for (var i = 2; i < $(idnext).children().length; i++) {
                        var proclass;
                        var city_proper=$('<div class="fl city" id=city'+$(idnext).children().eq(i).val()+'>'+$(idnext).children().eq(i).html()+'|'+$(idnext).children().eq(i).val()+'<img class="delete_pic delete_proper" src="{{env('IMAGE_DOMAIN')}}/images/console/access_delete.png" alt=""></div>');
                        for (var j = 0; j < $(".city_proper"+lisid).children().length; j++) {
                            proclass=$(".city_proper"+lisid).children().eq(j).attr('id');
                            if(proclass==('city'+$(idnext).children().eq(i).val())){
                                break;
                            }
                        }
                        if(proclass!=('city'+$(idnext).children().eq(i).val())){
                            $(".city_proper"+lisid).prepend(city_proper);
                            cityarr[1].push($(idnext).children().eq(i).val())
                        }

                    }
                }else{
                    for (var i = 2; i < $(idnext).children().length; i++) {
                        var city_proper=$('<div class="fl city" id=city'+$(idnext).children().eq(i).val()+'>'+$(idnext).children().eq(i).html()+'|'+$(idnext).children().eq(i).val()+'<img class="delete_pic delete_proper" src="{{env('IMAGE_DOMAIN')}}/images/console/access_delete.png" alt=""></div>');
                        $(".city_proper"+lisid).prepend(city_proper);
                        cityarr[1].push($(idnext).children().eq(i).val())
                    };
                }
            }else if($(idnext).val()!=''){
                var proclass;
                for (var i = 0; i < $(".city_proper"+lisid).children().length; i++) {
                    proclass=$(".city_proper"+lisid).children().eq(i).attr('id');
                    if(proclass==('city'+$(idnext).val())){
                        return false;
                    }
                };
                if(proclass!=('city'+$(idnext).val())){
                    $(".city_proper"+lisid).prepend(city_proper);
                    cityarr[1].push($(idnext).val())
                }
            }else{
                return false;
            }
        // };
        $('.delete_proper').click(function(){
            $(this).parent('.city').remove();
        })
    }
    //选择开户行的省份
    showBankProvince();
    function showBankProvince() {
        $.ajax({
            url : '/console/bank/province',
            data:{},
            dataType:'json',
            type:'get',
            success:function(data){
                if(data.status == 'success') {
                    var data = data.data;
                    var areastring = '<option value="">--请选择省份--</option>';
                    for(var i=0; i<data.length; i++) {
                        var list = data[i];
                        areastring += '<option value="' + list +'">' + list + '</option>';
                    }
                    $("#bankprovince").html(areastring);
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
    }
    //显示开户行的城市
    function showBankCity(id) {
        var parentname = id.value;
        $.ajax({
            url : '/console/bank/city',
            data:{"provincename":parentname},
            dataType:'json',
            type:'get',
            success:function(data){
                if(data.status == 'success') {
                    var data = data.data;
                    var areastring = '<option value="">--请选择城市--</option>';
                    for(var i=0; i<data.length; i++) {
                        var list = data[i];
                        areastring += '<option value="' + list +'">' + list + '</option>';
                    }
                    $("#bankcity").html(areastring);
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
    }
     //获取银行名称
    function getbankname(){
        var bankcard = $("input[name='bankcard']").val();
        if(bankcard == '') {
            alert('银行卡不能为空');return;
        }
        $.ajax({
            url : '/console/bankname/get',
            data:{"bankcard":bankcard},
            dataType:'json',
            success:function(data){
                if(data.status == 'success') {
                    var bankname = data.data;
                    $("input[name='bankname']").val(bankname);
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
    }
    $('.delete_pic').click(function(){
        $(this).parent('li').remove();
    })
    $("#submit_form").click(function() {
        var admincitystring = '{';
        $("#city_information").find("li").each(function() {
            var pId = $(this).attr("id");
            if(admincitystring == '{') {
                admincitystring += '"' + pId + '":[';
            } else {
                admincitystring += ',"' + pId + '":[';
            }
            $('#'+pId).find('div .fl').each(function() {
                var districtid = $(this).attr("id");
                districtid = districtid.replace('city', '');
                admincitystring += '"' + districtid + '",';
            });
            admincitystring=admincitystring.substring(0,admincitystring.length-1);
            admincitystring += ']';
        });
        admincitystring += '}';
        $("input[name='admincitystring']").val(admincitystring);
        $.ajax({
            url : '/console/admin/agent/edit',
            type : 'post',
            data: $('form').serialize(),
            dataType:'json',
            success:function(data){
                if(data.status == 'success') {
                    window.location.href = '/console/admin/agent/list?cityid=' + cityid;
                } else {
                    alert(data.message);
                }
            }
        });
    });

    </script>

@endsection